package com.csw.compose.ui.module.component.container

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.csw.compose.theme.pagePadding
import com.csw.compose.ui.Destination
import com.csw.compose.ui.components.BodyText
import com.csw.compose.ui.components.LabelText
import com.csw.compose.ui.components.LargeSpacer
import com.csw.compose.ui.components.PrimaryTitle
import com.csw.compose.ui.components.UlItem
import com.csw.compose.ui.module.BasePage

@Preview(heightDp = 2000)
@Composable
fun RowPreview() {
    BasePage({}, "行组件（Row）") { RowPage() }
}

class RowData {
    companion object : Destination("RowPage")
}

@Composable
fun RowPage() {
    Column(
        modifier = Modifier
            .padding(horizontal = pagePadding)
            .verticalScroll(rememberScrollState())
    ) {
        PrimaryTitle("简介")
        BodyText("Row组件类似横向的LinearLayout，用于子组件按行排布")
        Row {
            for (i in 1..10) {
                Box(
                    Modifier
                        .size(40.dp)
                        .alpha(0.1f * i)
                        .background(Color.Red)
                )
            }
        }
        LargeSpacer()

        UlItem("align")
        LabelText("子组件在父组件中的水平重力设置")
        BodyText("默认左对齐")
        Row {
            for (i in 1..3) {
                Box(
                    Modifier
                        .size(40.dp)
                        .alpha(0.1f * i)
                        .background(Color.Red)
                )
            }
        }
        BodyText("居中")
        Row(Modifier.align(Alignment.CenterHorizontally)) {
            for (i in 1..3) {
                Box(
                    Modifier
                        .size(40.dp)
                        .alpha(0.1f * i)
                        .background(Color.Red)
                )
            }
        }
        BodyText("右对齐")
        Row(Modifier.align(Alignment.End)) {
            for (i in 1..3) {
                Box(
                    Modifier
                        .size(40.dp)
                        .alpha(0.1f * i)
                        .background(Color.Red)
                )
            }
        }
        LargeSpacer()

        UlItem("verticalAlignment")
        LabelText("子组件在父组件中的垂直重力设置")
        BodyText("默认上对齐")
        Row {
            Box(
                Modifier
                    .size(40.dp)
                    .alpha(0.1f)
                    .background(Color.Red)
            )
            Box(
                Modifier
                    .size(40.dp, 60.dp)
                    .alpha(0.2f)
                    .background(Color.Red)
            )
            Box(
                Modifier
                    .size(40.dp, 80.dp)
                    .alpha(0.3f)
                    .background(Color.Red)
            )
        }
        BodyText("居中")
        Row(verticalAlignment = Alignment.CenterVertically) {
            Box(
                Modifier
                    .size(40.dp)
                    .alpha(0.1f)
                    .background(Color.Red)
            )
            Box(
                Modifier
                    .size(40.dp, 60.dp)
                    .alpha(0.2f)
                    .background(Color.Red)
            )
            Box(
                Modifier
                    .size(40.dp, 80.dp)
                    .alpha(0.3f)
                    .background(Color.Red)
            )
        }
        BodyText("下对齐")
        Row(verticalAlignment = Alignment.Bottom) {
            Box(
                Modifier
                    .size(40.dp)
                    .alpha(0.1f)
                    .background(Color.Red)
            )
            Box(
                Modifier
                    .size(40.dp, 60.dp)
                    .alpha(0.2f)
                    .background(Color.Red)
            )
            Box(
                Modifier
                    .size(40.dp, 80.dp)
                    .alpha(0.3f)
                    .background(Color.Red)
            )
        }

        LargeSpacer()
        UlItem("horizontalArrangement")
        LabelText("子组件在父组件中的排布方式，它可以实现比align更丰富的对齐效果")
        BodyText("Arrangement.Start（默认），对应align(Alignment.Start)")
        Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.Start) {
            for (i in 1..3) {
                Box(
                    Modifier
                        .size(40.dp)
                        .alpha(0.1f * i)
                        .background(Color.Red)
                )
            }
        }
        BodyText("Arrangement.Center，对应align(Alignment.CenterHorizontally)")
        Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.Center) {
            for (i in 1..3) {
                Box(
                    Modifier
                        .size(40.dp)
                        .alpha(0.1f * i)
                        .background(Color.Red)
                )
            }
        }
        BodyText("Arrangement.End，对应align(Alignment.End)")
        Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.End) {
            for (i in 1..3) {
                Box(
                    Modifier
                        .size(40.dp)
                        .alpha(0.1f * i)
                        .background(Color.Red)
                )
            }
        }
        BodyText("Arrangement.SpaceBetween  左右贴边，同等间距")
        Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween) {
            for (i in 1..3) {
                Box(
                    Modifier
                        .size(40.dp)
                        .alpha(0.1f * i)
                        .background(Color.Red)
                )
            }
        }
        BodyText("Arrangement.SpaceBetween  占满一行，每个子组件有相同的左右间距")
        Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceAround) {
            for (i in 1..3) {
                Box(
                    Modifier
                        .size(40.dp)
                        .alpha(0.1f * i)
                        .background(Color.Red)
                )
            }
        }
        BodyText("Arrangement.SpaceEvenly  占满一行，左右边缘与子组件之间拥有相同间距")
        Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceEvenly) {
            for (i in 1..3) {
                Box(
                    Modifier
                        .size(40.dp)
                        .alpha(0.1f * i)
                        .background(Color.Red)
                )
            }
        }
    }
}